ProgressBarDirection = Enum{
    "LeftToRight",
    "TopToBottom",
}

local gets = {}
local sets = {}
ProgressBar = {
    props = {
        _progressValue = 0,
        _progressBarDirection = ProgressBarDirection.LeftToRight
    },
    gets = gets,
    sets = sets,
}

function ProgressBar:ctor()

end

function gets:progressBarDirection(self)
    return self._direction
end

function sets:progressBarDirection(self, key, value)
    if self._progressBarDirection == value then
        return
    end
    self._progressBarDirection = value
    self.owner:wh(self.owner.height, self.owner.width)
    self.fill:wh(self.fill.height, self.fill.width)
end

function gets:progressValue(self)
    return self._progressValue
end

function sets:progressValue(self, key, value)
    self._progressValue = value
    self:emit(NodeEvent.ProgressValueChanged, value, self)
end

local function updateFill(fill, value, bar)
    if bar._progressBarDirection == ProgressBarDirection.LeftToRight then
        fill.width = value * bar.width
    elseif bar._progressBarDirection == ProgressBarDirection.TopToBottom then
        fill.height = value * bar.height
    end
end

function Node.ProgressBar()
    local node = Node.Scale9("roundedBox48")
    node:addComponent(ProgressBar)
    node:wh(200, 20)
    node.color = Color.new(0.8, 0.8, 0.8, 1)

    local fill = Node.Scale9("roundedBox48"):addTo(node)
    fill.height = 20
    fill.color = Color32.new(37,170,225)
    fill.ax = 0
    fill:addComponent(Align)
    fill.alignPercentX = 0

    node:on(NodeEvent.ProgressValueChanged, updateFill, fill)

    return node
end